// 1.使用模块化的编程机制，导入Vue和VueRouter，咬调用Vue.use(VueRouter)
import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)
/**
 * 2. 定义路由
 * 每一个路由应该映射一个组件，其中component 可以是通过Vue.extend()
 * 创建的组件构造器，或者是一个组件配置对象
 * path 表示路由
 * name 表示路由的名称
 * component 当前路由所对应的组件
 * 可以通过()=> import('path') 来实现路由的懒加载  当路由被访问的时候 才加载相对应的饿组件
 * */
/**
 * 重定向页面在前
 * 404页面在后
 * 路由的查找规则是从上到下的，查找到了就不在往下查找
 */
const routes = [
  {
    path: '/',
    redirect: 'home' // 实现路由的重定向
  },
  {
    path: '/home',
    name: 'home',
    component: () => import('@/views/home/index.vue')
  }, {
    path: '/kind',
    name: 'kind',
    component: () => import('@/views/kind/index.vue')
  }, {
    path: '/user',
    name: 'user',
    component: () => import('@/views/user/index.vue')
  }, {
    path: '/cart',
    name: 'cart',
    component: () => import('@/views/cart/index.vue')
  }, {
    path: '**',
    name: '404', // 实现404页面
    component: () => import('@/views/notfound/index.vue')
  }
]
// 创建router实例 ，然后传routes 配置
// 你还可以传别的配置参数
const router = new VueRouter({
  mode: 'history', // hash /history
  base: process.env.BASE_URL,
  routes// router:routes key值和value值一样可以简写
})
// 暴露模块-----main.js入口文件处引入router，添加到new Vue的根实例中，
// 这样的话的可以再应用内部通过this.$router访问到路由的对象
export default router
